{% load business_tag %}
<div class="ibox-title">
    <h5> 服务器列表 <span id="servCount" style="color:red">总共有:{{serverCount}}台  服务器:{{ cvmCount }}台  数据库:{{ dbCount }}台 云缓存Redis:{{ redisCount }}台</span></h5>
    <div class="ibox-tools">
        <a class="collapse-link">
            <i class="fa fa-chevron-up"></i>
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-wrench"></i>
        </a>
        <ul class="dropdown-menu dropdown-user"></ul>
        <a class="close-link">
            <i class="fa fa-times"></i>
        </a>
    </div>
</div>
<div class="ibox-content">
    <form id="asset_form" >
        <dir style="display:flex;justify-content:flex-end">
        <div class="test_width" style="width:150px;">
            <label>
                <select name="change_idc" class="form-control m-b">
                    <option value="all">所有数据中心</option>
                    {% for i in idcs %}
                        {% ifequal i.id cIdc %}
                            <option value="{{ i.id }}" selected> {{ i }}</option>
                        {% else %}
                            <option value="{{ i.id }}"> {{ i }}</option>
                        {% endifequal %}
                    {% endfor %}
                </select>
            </label>
        </div>
        <div class="test_width">
            <label>
                <select name="change_type" class="form-control m-b">
                    <option value="all">所有类型</option>
                    {% for i in assetType %}
                        {% ifequal i.0 cType %}
                            <option value="{{ i.0 }}" selected> {{ i.1 }}</option>
                        {% else %}
                            <option value="{{ i.0 }}">{{ i.1 }}</option>
                        }
                        {% endifequal %}
                    {% endfor %}
                </select>
            </label>
        </div>
        <div class="test_width" style="padding-left: 0px">
            <label>
                <select name="change_project" class="form-control m-b">
                    <option value="all">所有项目</option>
                    {% for i in projects %}
                        {% ifequal i.id cProject %}
                            <option value="{{ i.id }}" selected> {{ i }}</option>
                        {% else %}
                            <option value="{{ i.id }}"> {{ i }}</option>
                        {% endifequal %}
                    {% endfor %}
                </select>
            </label>
        </div>
        <div class="test_width">
            <label>
                <select name="change_role" class="form-control m-b">
                    <option value="all">所有角色</option>
                    {% for i in roles %}
                        {% ifequal i.id cRole %}
                            <option value="{{ i.id }}" selected> {{ i }}</option>
                        {% else %}
                            <option value="{{ i.id }}"> {{ i }}</option>
                        {% endifequal %}
                    {% endfor %}
                </select>
            </label>
        </div>
        <div class="col-sm-3">
            <div class="input-group">
                <input type="text" class="form-control m-b" id="search_input" name="keyword" placeholder="IP搜索">
                <input type="text" style="display: none">
                <div class="input-group-btn">
                    <button type="button" href="/assets/asset_list/" name="search" class="btn btn-xm btn-primary search_btn" onclick="return false">
                        搜索
                    </button>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-xm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          导出
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <!--<li><a href="/assets/host_search/?_search=true&name=pdf" class="search_btn_pdf" name="search" onclick="return false" >导出pdf</a></li>-->
                            <li><a href="/assets/asset_list/?download=true&name=excel&" class="search_btn_pdf" name="search" onclick="return false" >导出excel</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div id="download"></div>
        </dir>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th class="text-center">所属数据中心</th>
                    <th class="text-center">设备类型</th>
                    <th class="text-center">管理IP</th>
                    <th class="text-center">所属应用</th>
                    <th class="text-center">角色</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for i in contacts.object_list %}
                    <tr>
                        <td class="text-center">{{ i.group }}</td>
                        <td class="text-center">{{ i.get_server_type_display }}</td>
                        <td class="text-center">{{ i.ip }}</td>
                        <td class="text-center">{{ i.app_name.all|group_str2 }}
                        <td class="text-center">{{ i.role_name.all|group_str2 }}</td>
                        <td class="text-center">
                            <div class="btn-group" data-toggle="buttons">
                                <a href="/assets/host_detail/?id={{ i.id }}" class="btn btn-xs btn-primary" data-toggle="modal">详情</a>
                                <a href="/assets/host_edit/?id={{ i.id }}" class="btn btn-xs btn-success " data-toggle="modal">修改</a>
                                <a href="/assets/host_del/?id={{ i.id }}" class="btn btn-xs btn-danger" data-toggle="modal">删除</a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <dir class="row">
            <dir class="col-sm-6">
            </dir>
            {% include 'assets/paginator.html' %}
        </dir>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.search_btn').unbind('click').bind('click',function(){
        var url= $(this).attr("href");
        $.ajax({
            type: "GET",
            url: url,
            data: $("#asset_form").serialize(),
            success: function (data) {
                $("#replace").html(data);
            }
            });
        });
        $('.search_btn_pdf').unbind('click').bind('click',function(){
        var url= $(this).attr("href");
        window.location = url + $("#asset_form").serialize()
        });
        $(".form-control").change(function(){
            $.ajax({
                type: "GET",
                url: "/assets/assetList/",
                data: $("#asset_form").serialize(),
                success: function (data) {
                    $("#replace").html(data);
                }
            });
        });
    });
</script>